<template>
 <div id='wrapper' class="list-wrapper list-wrapper-hook wrap_right">
 <div class='titleF'>产品参数</div>
    <div class='ptext'>
      
        <span class="van-cell-text title-sname">品牌</span>
        <span class="van-cell-text">{{datas.brandName ==''? '无' : datas.brandName}}</span>
      
    </div>
     <div class='ptext'>
      
        <span class="van-cell-text title-sname">分类</span>
        <span class="van-cell-text">{{datas.cateName ==''? '无' : datas.cateName}}</span>
      
    </div>
     <div class='ptext'>
      
        <span class="van-cell-text title-sname">亚麻</span>
        <span class="van-cell-text">
          <span v-for="(d,r) in datas.attributes[0].attrList" :key="r" v-if="d.isSel === 1">{{d.attrName}}</span>
        </span>
      
    </div>
     <div class='ptext'>
      
        <span class="van-cell-text title-sname">主面料</span>
        <span class="van-cell-text">
          <span v-for="(d,r) in datas.attributes[1].attrList" :key="r" v-if="d.isSel === 1">{{d.attrName}}</span>
        </span>
      
    </div>
     <div class='ptext'>
      
        <span class="van-cell-text title-sname">上市年份</span>
        <span class="van-cell-text"><span v-for="(d,r) in datas.attributes[2].attrList" :key="r" v-if="d.isSel === 1">{{d.attrName}}</span></span>
      
    </div>
     <div class='ptext'>
      
        <span class="van-cell-text title-sname">填充物</span>
        <span class="van-cell-text"><span v-for="(d,r) in datas.attributes[3].attrList" :key="r" v-if="d.isSel === 1">{{d.attrName}}</span></span>
      
    </div>
     <div class='ptext'>
      
        <span class="van-cell-text title-sname">厚薄</span>
        <span class="van-cell-text"><span v-for="(d,r) in datas.attributes[4].attrList" :key="r" v-if="d.isSel === 1">{{d.attrName}}</span></span>
      
    </div>
     <div class='ptext'>
      
        <span class="van-cell-text title-sname">季节</span>
        <span class="van-cell-text"><span v-for="(d,r) in datas.attributes[5].attrList" :key="r" v-if="d.isSel === 1">{{d.attrName}}</span></span>
      
    </div>
     <div class='ptext'>
      
        <span class="van-cell-text title-sname">安全等级</span>
        <span class="van-cell-text"><span  v-for="(d,r) in datas.attributes[6].attrList" :key="r" v-if="d.isSel === 1">{{d.attrName}}</span></span>
      
    </div>
     <div class='ptext'>
      
        <span class="van-cell-text title-sname">年龄段</span>
        <span class="van-cell-text"><span>{{datas.ageGroupName}}</span></span>
      
    </div>
     <div class='ptext'>
      
        <span class="van-cell-text title-sname">尺码</span>
        <span class="van-cell-text"><span v-for="(d,r) in datas.skuSize" :key="r">{{d.sizeName}}</span></span>
      
    </div>
     <div class='ptext'>
    
      <span class="van-cell-text title-sname">颜色</span>
      <span class="van-cell-text"><span v-for="(d,r) in datas.skuColor" :key="r">{{d.colorName}}</span></span>
    
     </div>
     <!-- <div class='bottom'>完成</div> -->
  </div>
  </template>

<script>
  // import BScroll from './bscroll.js'
export default {
  name: 'parameters',
  props: {
    datas: Object,
    default() {
      return {
         scroll:'',
      };
    },
  },
  data () {
    return {
    };
  },
  created(){
  setTimeout(()=>{
    console.log(this.datas)
    //  this.scroll = new BScroll(document.getElementById('wrapper'),{
    //         probeType: 3
    //     })
  },1000)
      
  }
}
</script>
 
 
<style lang="scss" scoped>
  .parameters{
    // height: 400px;
    // .title-sname{
    //   display: inline-block;
    //   width: 70px;
    // }
  }
  .bottom{

  }
.titleF{
  line-height: 50px;
  font-size: 14px;
  color: #333;
  width: 100vw;
  border-bottom:1px solid #f4f4f4;
  text-align: center;
  background: #fff;
  top: 0;
  left: 0;
}

  .bottom{
      line-height: 50px;
      font-size: 14px;
      color: #fff;
      width: 100vw;
      position: absolute;
      bottom:0;
      left: 0;
      text-align: center;
      background: #FB3232;
  }
  .ptext{
    width: 100vw;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 10px 15px;
    box-sizing: border-box;
    line-height: 24px;
    position: relative;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    overflow: hidden;
      span{
        font-size: 14px;
        color: #333;
      }
      span:nth-child(1){
          display: inline-block;
          width: 80px;
      }
  }
  .ptext:before{
      content: ' ';
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    left: 15px;
    right: 0;
    bottom: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    border-bottom: 1px solid #eee;
  }
  .wrap_right {
      left: 0;
      width: 100vw;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      background-color: #fff;
    }
.list-wrapper {
    width: 100vw;
    bottom:0;
    right: 0;  
    background: rgba(243,244,245,1);
     height:480px;
    overflow-y:scroll ;  
    position: relative;
}
 .list-wrapper{
  // height: 400px;    
  }   
</style>